<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<title>Talend Dashboard</title>
	<link rel="icon" href="./images/favico.ico" />
	<link href="./css/main.css" rel="stylesheet" type="text/css"
		media="screen" />
</h:head>
<h:body>
	<div class="container">
		<div class="column">
			<div class="large">
				<div class="headicon">
					<div class="left">
						<img src="./images/logo-talend.png" height="70" width="254" />
					</div>
					<div class="right">
						<img src="./images/xml.png" />
					</div>
					<div class="right">
						<img src="./images/csv.png" />
					</div>
					<div class="right">
						<img src="./images/pdf.png" />
					</div>
					<div class="right">
						<img src="./images/excel.png" />
					</div>
				</div>
				<div class="line"></div>
				<div class="contentlarge">
					<f:view>
						<h:form>
							<p:growl id="growl" showDetail="true"/>
							<h:panelGrid columns="2">
								<p:fieldset legend="Open vs. Closed">
									<p:barChart value="#{barChart.categoryModel}"
										legendPosition="n" title="According to severity past month"
										min="0" max="200" animate="true" seriesColors="7BA146, 5C7040"
										style="height:300px;margin-bottom:10px">
										<p:ajax event="itemSelect" listener="#{barChart.itemSelect}"
											update="growl" />
									</p:barChart>
									<p:lineChart value="#{linearChart.linearModel}"
										legendPosition="nw" zoom="true" animate="true"
										seriesColors="698443, 4C563D" title="Over the past 8 weeks"
										minY="0" maxY="200" xaxisLabel="Monday of the week"
										style="width:400px" />
								</p:fieldset>
								<p:fieldset legend="Surveys">
									<p:pieChart value="#{pieChart.pieModel}" legendPosition="e"
										fill="false" showDataLabels="true"
										seriesColors="7BA146, 698443, 5C7040, 4C563D"
										title="Customer satisfaction" style="width:400px;height:300px"
										sliceMargin="5" diameter="200">
										<p:ajax event="itemSelect" listener="#{pieChart.itemSelect}" update="growl" />
									</p:pieChart>
									<p:lineChart value="#{areaChart.categoryModel}" fill="true"
										title="Over the past 5 months" animate="true"
										seriesColors="7BA146, 698443, 5C7040, 4C563D"
										style="height:300px;margin-top:10px" xaxisLabel="Month"
										minY="0" maxY="100" yaxisLabel="Percentage" />
								</p:fieldset>
							</h:panelGrid>
						</h:form>
					</f:view>
				</div>
			</div>
		</div>
	</div>
</h:body>
</html>
